<template >
  <el-container>
  <el-main style="margin: 5px 0% 5px 8%;">
    <div style="width: 100%">
    <el-row>
      <el-col style="width: 296px" :span="5" v-for="(course, index) in courseList" :key="index" class="elcol">
        <el-card :body-style="{ margin: 0, padding: '0px', border: '0 5px'}" shadow="always">
          <div style="cursor: pointer;" @click="onMouseClick(index)">
            <el-image :src="course.iconUrl" class="image">
              <div slot="error" class="image-slot">
                <img src="http://39.108.10.228/pic/defaul.png" style="width: 296px; height: 200px">
              </div>
            </el-image>
            <div style="padding: 14px;" class="course-card-item">
              <el-tooltip class="item" :open-delay=250 :visible-arrow="false" :content="course.title" placement="top-start">
                <router-link :to="{path: course.url, query: {id: course.id}}" class="course-title">{{course.title}}</router-link>
              </el-tooltip>
              <div class="bottom clearfix">
                <router-link @click.stop.native :to="course.infoUrl" style="font-size: 14px; color: #29b1cc">课程详情</router-link>
                <span style="font-size: 14px;" class="teacher">{{course.name}}</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    </div>
  </el-main>
  <el-footer>
    <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="disload" infinite-scroll-distance=10></ul>
    <p v-if="loading" style="margin-top: 1%; text-align: center">加载中...</p>
    <p v-if="noMore" style="margin-top: 1%; text-align: center">没有更多了</p>
  </el-footer>
  </el-container>

</template>

<script>
export default({
  name: 'home',
  data () {
    return {
      login: window.sessionStorage.token,
      loginId: this.$store.state.user.status,
      // 教师头像
      iconUrl: this.$store.state.user.iconUrl,
      userName: this.$store.state.user.name,
      courseList: [],
      loading: false,
      noMore: false,
      start: 0
    }
  },
  methods: {
    loadMore () {
      this.loading = true
      this.getRequest('/api/course/list?start=' + this.start + '&count=8').then((res) => {
        this.start += 8
        var data = res.data
        if (!data.data.length) {
          this.noMore = true
        }
        if (data.code === 200) {
          // console.log('data::', data)
          for (var i in data.data) {
            var obj = data.data[i]
            if (!obj.finished) {
              obj.url = (this.$store.state.user.status == 1 ? '/course?id=' : '/live?id=') + obj.id
              obj.userUrl = '/teacher?id=' + obj.uid
              obj.infoUrl = '/detail?id=' + obj.id
              // 返回值中只有前5项，后面要根据内容再获取
              this.courseList.push(obj)
            }
          }
          this.loading = false
        } else {
          alert('失败，原因为:' + data.msg)
        }
      }).catch((res) => {
        // console.log('res:',res)
        // alert('错误，原因为:' + res.data)
      })
    },
    onMouseClick (index) {
      this.$router.push({
        path: this.courseList[index].url,
        query: {
          id: this.courseList[index].id
        }
      })
    },
    logout () {
      window.sessionStorage.clear()
      window.localStorage.clear()
      this.$router.push({
        path: '/'
      })
    },
    onSearch () {
      var searchtext = this.$route.query.search
      var _this = this
      if (searchtext) {
        this.getRequest('/api/course/search?pattern=' + searchtext).then(resp => {
          var data = resp.data
          if (data || data.code == 200) {
            for (var i in data.data) {
              var obj = data.data[i]
              obj.url = (this.$store.state.user.status == 1 ? '/course?id=' : '/live?id=') + obj.id
              obj.userUrl = '/teacher?id=' + obj.uid
              obj.infoUrl = '/detail?id=' + obj.id
              // 返回值中只有前5项，后面要根据内容再获取
            }
            if (!data.data[0]) {
              this.$message.info('未找到相关数据')
            } else {
              _this.courseList = []
              for (var i in data.data) {
                _this.courseList.push(data.data[i])
              }
            }
          }
        })
      } else {
        this.$router.go(0)
      }
    }
  },
  watch: {
    '$route' (to, from) {
      this.$nextTick(() => {
        this.onSearch()
      })
    }
  },
  mounted () {
    if (!this.$route.query.search) {
      // console.log('********-----------*******')
      // console.log(this.$route.query.search)
      var _this = this
      this.loadMore()
    } else {
      this.$nextTick(() => {
        this.onSearch()
      })
    }
  },
  computed: {
    disload () {
      return this.loading || this.noMore
    }
  }
})
</script>

<style scoped>
  * {
    margin: 0px;
    padding: 0px;
    border: 0px;
  }

  .elcol {
    margin: 20px;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .course-card-item a:link,a:visited {
    text-decoration: none;
    color: #000000;
  }

  .course-card-item a:hover,a:active {
    text-decoration: none;
    color: #29b1cc;
  }

  .course-title{
    word-break:break-all;
    display:-webkit-box;
    -webkit-line-clamp:1;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }

  .teacher {
    padding: 0;
    float: right;
  }

  .image {
    width: 296px;
    height: 169px;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }

  .clearfix:after {
      clear: both
  }
</style>
